<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root">
        <h1>今天天气很{{fullName}}</h1>
        <button @click="changClick">qihuan</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#root",
            data() {
                return {
                    ishot: true,
                    i: 0
                }
            },
            computed: {
                fullName() {
                    return this.ishot ? '炎热' : '凉爽'
                }
            },
            methods: {
                changClick() {
                    this.ishot = !this.ishot
                    this.i++
                }
            },
            // watch: {
            //     //监视的配置对象
            //     //watch不仅能监视data的普通属性，也可以检测计算属性
            //     ishot: {
            //         immediate: true, //当这个属性为true时，页面刚渲染就运行handler函数
            //         //handler 什么时候调用呢
            //         //当isHot发生改变就会调用该函数
            //         //handler接收两个参数，一个是这个状态参数改变前的值，另一个是改变后的旧值
            //         handler(newvalue, oldvalue) {
            //             console.log('ishot被修改了');
            //             console.log(`newValue: ${newvalue},oldvalue:${oldvalue}`);

            //         }
            //     }
            // },
        })
        //watch的第二种写法，直接采用vm对象实例
        vm.$watch('ishot', {
            immediate: true, //当这个属性为true时，页面刚渲染就运行handler函数
            //handler 什么时候调用呢
            //当isHot发生改变就会调用该函数
            //handler接收两个参数，一个是这个状态参数改变前的值，另一个是改变后的旧值
            handler(newValue, preValue) {
                console.log('ishot 被修改了');
                console.log(`newValue: ${newValue}, preValue: ${preValue}`);
            }
        });
    </script>
</body>

</html>